<template>
  <div class="ivu-box">
    <Breadcrumb>
      <BreadcrumbItem>订单管理</BreadcrumbItem>
      <BreadcrumbItem>审核</BreadcrumbItem>
    </Breadcrumb>
    <Form>
      <FormItem>
        <Button @click="$router.go(-1)" style="margin-right: 10px">返回</Button>
      </FormItem>
    </Form>
    <div class="form_box" id="form_box">
      <div class="cardBox" style="overflow: hidden">
        <div class="left" ref="getheight" style="width: calc(50% - 10px); float: left; height: 1000px">
          <div class="card colWrapper" id="x1" style="width: 100%">
            <h3 style="align-self: flex-start">视频区</h3>
            <video ref="video" width="100%" controls name="media" style="height: 300px"></video>
            <Button style="margin-top: 20px" type="primary">上传副视频</Button>
          </div>
          <div class="card" id="x2" style="width: 100%; margin-bottom: 0">
            <h3>明细</h3>
            <div style="text-align: center; height: 105px; overflow-y: auto;">
              <div
                style="cursor: pointer;display:flex;justify-content: space-between;"
                :class="checkIndex === item.id ? 'on' : ''"
                @click="changeLight(item, index)"
                v-for="(item, index) in mxadata"
                :key="index"
                v-if="item.product_num !== 0">
                <span>
                  {{ item.product_name }}￥{{ item.price }} X
                  {{ item.product_num }}
                </span>
                <span
                  v-if="checkIndex === item.id"
                  style="color:red;"
                  @click.stop="dels(item, index)"
                >删除</span>
              </div>
            </div>

            <div
              style="
                width: 100%;
                display: flex;
                justify-content: center;
                padding: 20px 0;
              ">
              <Button type="primary" @click="submit">提交</Button>
            </div>
          </div>
        </div>
        <div style="width: calc(50% - 10px); float: right; overflow-y: scroll; height: 1000px">
          <div class="card" style="width: 100%; margin-bottom: 0;">
            <h3>模板库</h3>
            <!--            <video ref="video" width="100%" controls name="media" style="height: 600px"></video>-->
            <ul class="ulBox form_bar">
              <li
                class="li"
                :class="checkIndex === item.id ? 'active' : ''"
                v-for="(item, index) in mouldData"
                :key="index"
                @click="mbclk(item, index)"
              >
                <div class="add" @click="mdAdd(item)"></div>
                <div class="remove" @click="mdReduce(item)"></div>
                <div style="display:flex;justify-content: space-between;">
                  <div @click="mdAdd(item)"
                       style="font-size:20px; width:25px;height:25px; border:1px solid #ccc;border-radius:50%;text-align:center;line-height:20px;">
                    +
                  </div>
                  <div>{{ item.goods_num }}</div>
                  <div @click="mdReduce(item)"
                       style="font-size:20px;width:25px;height:25px; border:1px solid #ccc;border-radius:50%;text-align:center;line-height:20px;">
                    -
                  </div>
                </div>
                <img class="img" :src="item.pic" alt=""/>
                <div class="name">{{ item.name }}</div>
              </li>
            </ul>
          </div>
          <div class="card" style="width: 100%; margin-bottom: 0">
            <h3>选择罚款原因</h3>
            <div style="height: 130px; overflow-y: auto;">
              <RadioGroup v-model="formItem.radio">
                <Radio label="one">用户遮挡摄像头/遮挡商品/偷吃</Radio>
                <br>
                <Radio label="two">用户购买的商品不在模板里</Radio>
                <br>
                <Radio label="three">识别困难或者无法识别包括不限于视频短缺/灯光问题/门未关等</Radio>
                <br>
                <Radio label="four">用户将商品放错层架（暂只针对重力柜有效）
                </Radio>
              </RadioGroup>
            </div>
            <div
              style="
                width: 100%;
                display: flex;
                justify-content: center;
                padding: 20px 0;
              ">
              <Button type="primary" @click="submit">提交</Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import '../../style/main.css'

export default {
  data() {
    return {
      formItem: {
        radio: 'one'
      },
      video: "",
      mouldData: [],
      checkIndex: null,
      refHeight: 0,
      mxadata: [],
      xxx: 0,
    };
  },
  mounted() {
    setTimeout(() => {
      this.$nextTick(() => {
        this.refHeight = this.$refs.getheight.clientHeight;
        this.xxx = document.getElementById('x1').offsetHeight + document.getElementById('x2').offsetHeight + 160
      });
    }, 300);
  },
  created() {
    this.getGoods();
    this.getVideo();
    this.getMx();
  },
  methods: {
    getGoods() {
      this.axios
        .post("/order/get_order_goods", {order_id: this.$route.query.id})
        .then(res => {
          console.log("res: ", res);
          if (res.code === 1) {
            this.mouldData = res.data.dataInfo[0].goods;
          }
        });
    },
    getMx() {
      this.axios
        .post("/order/check_order", {
          id: this.$route.query.ids,
          page: 1,
          limit: 1
        })
        .then(res => {
          console.log('res: ', res)
          if (res.code === 1) {
            this.mxadata = res.data.list[0].order_goods;
            if (!this.mxadata) {
              this.mxadata = []
            }
          }
        });
    },
    getVideo() {
      this.axios
        .post("/order/get_video", {order_id: this.$route.query.id})
        .then(res => {
          console.log("res: ", res);
          if (res.code === 1) {
            this.$refs.video.src = res.data.video_url;
          }
        });
    },
    mbclk(item, index) {
      this.checkIndex = item.id;
      let finds = false;
      for (const key in this.mxadata) {
        if (this.mxadata[key].id === item.id) {
          this.mxadata[key].product_num = item.goods_num;
          finds = true;
        }
      }
      if (finds === false) {
        this.mxadata.push({
          id: item.id,
          price: item.c_price,
          product_name: item.name,
          product_num: item.goods_num
        });
      }
    },
    changeLight(item, index) {
      this.checkIndex = item.id;
      console.log(index)
    },
    dels(item, index) {
      this.checkIndex = null;
      this.mxadata.splice(index, 1);
      for (const i in this.mouldData) {
        if (item.id === this.mouldData[i].id) {
          this.mouldData[i].goods_num = 0;
        }
      }
    },
    submit() {
      let goods = [];
      let falg = [];
      for (const key in this.mxadata) {
        let b = false;
        for (const i in this.mouldData) {
          if (this.mxadata[key].id === this.mouldData[i].id) {
            console.log(falg);
            b = true;
          }
        }
        falg.push(b);
      }
      console.log(falg);
      let run = true;
      for (const key in falg) {
        if (!falg[key]) {
          run = false;
        }
      }
      console.log(run);
      if (!run) {
        return this.$Message.error("请移除未上架商品");
      }
      this.mxadata.forEach((items, index) => {
        console.log(index)
        if (items.product_num !== 0) {
          goods.push({
            goods_id: items["id"],
            num: items["product_num"]
          });
        }
      });
      console.log(goods);
      this.axios
        .post("/order/user_check", {
          goods: goods,
          id: this.$route.query.ids
        })
        .then(res => {
          console.log("res: ", res);
          if (res.code === 1) {
            this.$Message.success("审核成功");
            this.$router.go(-1);
          }
        });
    },
    mdAdd(item) {
      item.goods_num = Number(item.goods_num) + 1;
      for (const key in this.mxadata) {
        if (this.mxadata[key].id === item.id) {
          this.mxadata[key].product_num = item.goods_num;
        }
      }
    },
    mdReduce(item) {
      if (item.goods_num > 0) {
        item.goods_num = Number(item.goods_num) - 1;
        for (const key in this.mxadata) {
          if (this.mxadata[key].id === item.id) {
            this.mxadata[key].product_num = item.goods_num;
          }
        }
      } else {
        item.goods_num = 0;
      }
    }
  }
};
</script>

<style scoped lang="scss">
.swiper-container {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

// .swiper-wrapper{width: 100%!important;}

.li {
  position: relative;

  .add {
    position: absolute;
    left: 0;
    width: 50%;
    top: 0;
    bottom: 0;
  }

  .remove {
    position: absolute;
    right: 0;
    width: 50%;
    top: 0;
    bottom: 0;
  }
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  max-height: 164px;
  // width: calc(33.3333% - 10px);
  // box-sizing: border-box;
  border: 1px solid #dcdee2;
  padding: 10px;
  // margin-top: 20px;

  .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    margin: 10px auto;
  }

  .name {
    text-align: center;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.mdbtn {
  width: 20px;
  height: 20px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.on {
  background-color: #5cadff;
  color: #fff;
}

.ulBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  li {
    width: calc(33.3333% - 10px);
    min-height: 160px;
    box-sizing: border-box;
    border: 1px solid #dcdee2;
    padding: 10px;
    margin-top: 20px;

    .img {
      width: 80px;
      height: 80px;
      // object-fit: cover;

      margin: 10px auto;
    }

    .name {
      text-align: center;
    }
  }

  .active {
    border: 4px solid #2db7f5 !important;
  }

  &::after {
    content: "";
    width: calc(33.3333% - 10px);
  }
}

.cardBox {
  padding: 15px;

  .card {
    width: calc(50% - 10px);
    margin-bottom: 20px;

  }
}

.card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 18px 20px;
}

.flexSw {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.flexSw .left {
  // width: 450px;
  // flex: 1;
  width: 100%;
}

.flexSw .right {
  // width: 450px;
}

.borderCard {
  // overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  flex-flow: column;
  box-sizing: border-box;
}

.borderCard ul {
  display: block;
  min-width: 300px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  padding: 20px;
  margin-bottom: 10px;
}

.borderCard ul li {
  list-style: none;
  line-height: 26px;
  font-size: 14px;
  overflow: hidden;
  display: block;
}

.borderCard ul li .name {
  color: #999;
  float: left;
  width: 130px;
  padding-right: 20px;
  text-align: right;
}

.borderCard ul li .text {
  color: #000;
  float: left;
}

h3 {
  line-height: 50px;
}

.subordinate {
  margin: 10px 20px;
}

.checkbox {
  margin: 5px 10px;
  min-width: 200px;
}

.check {
  margin-top: 5px;
  margin-left: 30px;
  min-width: 160px;
}

.checkboxs {
  border-bottom: 1px solid silver;
  padding-bottom: 10px;
}

.outer {
  margin: 20px 0;
  padding: 10px;
  border: 1px solid silver;
  border-radius: 5px;
}
</style>
